<template>
	<view class="" style="padding-bottom: 15rpx;">
		<view class="bg"></view>
		<view class="top-box"></view>
		<view class="box-m">
			<image class="m_1" src="/static/img/m-3.png" mode="widthFix" v-if="etcApplyType == 1"></image>
			<image class="m_1" src="/static/img/m-2.png" mode="widthFix" v-if="etcApplyType == 2"></image>
		</view>
		<!-- 车牌号码 -->
		<view class="box">
			<view class="box-top">
				<view class="lines"></view>
				<view class="">车牌号码</view>
			</view>
			<view class="" style="margin-top: 34rpx;">
				<car-number-input @numberInputResult="numberInputResult" :defaultStr="defaultNum"></car-number-input>
			</view>
			<view class="blocks-box" style="font-size: 20rpx;margin-top: 32rpx;">
				<view class="blocks"></view><text style="color: #0C77FB;">快速办理</text><text>各种车辆信息</text>
			</view>
		</view>
		<!--  -->
		<view class="box boxs">
			<view class="box-top">
				<view class="lines"></view>
				<view class="">收货信息</view>
			</view>
			<view class="box-cells" style="margin-top: 43rpx;">
				<text>联系人</text>
				<view class="box-cells-input">
					<input type="text" v-model="contactName" placeholder="请输入姓名" placeholder-style="color:#A6A6A6;">
				</view>
			</view>
			<view class="box-cells" style="margin-top: 43rpx;">
				<text>联系电话</text>
				<view class="box-cells-input">
					<input type="number" maxlength="11" v-model="contactPhone" placeholder="请输入联系电话"
						placeholder-style="color:#A6A6A6;">
				</view>
			</view>
			<view class="box-cells" style="margin-top: 43rpx;" @click="showCity=true">
				<text>地区选择</text>
				<view class="box-cells-input">
				<!-- 	<picker mode="region" @change="bindRegionChange" :value="region">
						<view class="picker" :class="addressa==''?'b-color':''">
							{{addressa==''?'请选择地区':addressa}}
						</view>
					</picker> -->
					{{des.address==''?'请选择地区':des.address}}
				</view>
			</view>
			<view class="box-cells" style="margin-top: 43rpx;">
				<text>详细地址</text>
				<view class="box-cells-input" :class="addressb==''?'b-color':''">
					<input type="text" v-model="addressb" placeholder="请输入详细地址" placeholder-style="color:#A6A6A6;">
				</view>
			</view>
		</view>
		<!--  -->
		<view class="box boxs">
			<view class="box-top">
				<view class="">
					<image src="/static/imges/tips.png" mode="widthFix"></image>
				</view>
				<view class="" style="font-size: 26rpx;">友情提示</view>
			</view>
			<view class="tips-box">
				为了保护用户的隐私，用户收到设备自己扫码上传行驶证等资料手机激活即可。
			</view>
		</view>
		<!--  -->
		<view class="btn" @click="openFloor()">支付办理</view>
		<!-- 弹窗 -->
		<view class="fetchs" v-if="isFalse" @click.stop="closeisFalse()"></view>
		<view class="fetchs-box" v-if="isFalse">
			<view class="boxx" style="margin: 0 auto;">
				<view class="fetchs-box-top">
					<image src="/static/imges/okk.png" mode="widthFix"></image>
				</view>
				<view class="">支付成功</view>
				<view class="sure-btn" @click.stop="toIndex()">确定</view>
			</view>
		</view>
		<selectData style="z-index: 99999;" @close="showCity=false" @conceal="onsetCity" v-if="showCity"></selectData>
	</view>
</template>

<script lang="ts">
	// @ts-nocheck
	import Vue from 'vue';
	import { chooseLocationMP } from "../../utils/chooseLocation";
	import { doEtc, getEtcApplyStmpIdList, getEtcCancelStmpIdList, payOders, WeChatPay } from "../../api/api";
	import { pay } from '../../utils/pay.ts';
	import { getRoles } from "../../api/common/login";
	import { getUserInfo, undifinedOrder } from "../../api/my/my";
	import selectData from '@/components/erha-picker/erha-picker.vue'
	export default Vue.extend({
		components:{
			selectData,
		},
		data() {
			return {
				defaultNum: '',
				address: '',
				addressa: '',
				showCity:false,
				addressas: '',
				addressb: '',
				isFalse: false,
				licensePlateNumber: '',//车牌号
				contactName: '',//联系人
				contactPhone: '',//联系电话
				newEnergy: false,//是否为新能源
				price: '',
				etcApplyType: '',//办理类型  1.支付宝ETC,2微信ETC
				userInfo: '',
				licensePlateNumbers: "",
				pid: '',
				des:{province:"",city:"",area:"",address:""},
				region: '',//地区

			};
		},
		onLoad(options : any) {
			// #ifdef H5
			this.licensePlateNumber = "赣T-TEEW6Y"
			this.contactPhone = "15999999999"
			this.contactName = "姓名"
			this.addressb = "454545454545"
			this.des.address="福建省泉州市安溪县城厢镇"
			// #endif
			// console.log('options',options)
			this.etcApplyType = options.navIndex
			this.price =options.navIndex==1?'218':"128"
		},
		async onShow() {
			const roles = await getRoles()
			if (roles.indexOf('role:login_app') === -1) {
				uni.navigateTo({
					url: '/pages/common/nick_avatar'
				})
			} else {
				this.contactName = ''; //联系人姓名
				this.contactPhone = ''; //联系人手机号
			}

			await this.getUsers()

		},
		methods: {
			onsetCity(e) {
				this.des.province = e.province
				this.des.city = e.city
				this.des.area = e.area
				this.des.address = e.province + e.city + e.area + (e.street ? e.street : '')
				this.showCity = false
			},
			// 获取用户信息
			async getUsers() {
				this.userInfo = await getUserInfo()
			},

			// 地区选择
			bindRegionChange(e) {
				this.addressa = e.detail.value[0] + '-' + e.detail.value[1] + '-' + e.detail.value[2]
				this.addressas = e.detail.value[0] + e.detail.value[1] + e.detail.value[2]
			},
			// 支付办理
			async openFloor() {
				let regPhone = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if (!regPhone.test(this.contactPhone)) {
					uni.showToast({
						title: '请填写正确手机号',
						icon: "none"
					});
					return
				}
				if (this.contactName == '') {
					uni.showToast({
						title: '请填写姓名',
						icon: "none"
					});
					return
				}
				// if (this.contactPhone == '') {
				// 	uni.showToast({
				// 		title: '请填写手机号',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// let regPhone = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				// if (!regPhone.test(this.contactPhone)) {
				// 	uni.showToast({
				// 		title: '请填写正确手机号',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				if (this.des.address == '') {
					uni.showToast({
						title: '请选择地区',
						icon: "none"
					});
					return
				}
				if (this.addressb == '') {
					uni.showToast({
						title: '请选择详细地址',
						icon: "none"
					});
					return
				}
				if (this.licensePlateNumber == '') {
					uni.showToast({
						title: '请填写车牌号',
						icon: "none"
					});
					return
				}
				// if (this.licensePlateNumbers.length < 7) {
				// 	uni.showToast({
				// 		title: '请填写正确车牌号',
				// 		icon: "none"
				// 	});
				// 	return
				// }
				// // console.log('22',this.newEnergy)
				// // console.log('this.licensePlateNumber',this.licensePlateNumber)
				// // if(this.newEnergy){
				// //   const reg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]{1}[A-Z]{1}[A-Z]{1}[A-Z0-9]{1}[0-9]{4}$/
				// //   if (!reg.test(this.licensePlateNumbers)) {
				// //     uni.showToast({
				// //       title: '请填写正确的车牌号',
				// //       icon: "none"
				// //     })
				// //     return
				// //   }
				// // }
				// var params = {
				// 	uid: this.userInfo.id,//用户id
				// 	licensePlateNumber: this.licensePlateNumber,//车牌
				// 	contactName: this.contactName,//联系人姓名
				// 	contactPhone: this.contactPhone,//电话
				// 	address: this.addressas + this.addressb,//地址
				// 	etcApplyType: this.etcApplyType,//类型
				// 	newEnergy: this.newEnergy,//是否新能源
				// }
				// return false;

				const params = {
					car_number: this.licensePlateNumber,
					name: this.contactName,
					phone: this.contactPhone,
					area: this.des.address,
					detail: this.addressb,
					price:this.price 
				}
				const { code, data } = await undifinedOrder(params)
				console.log(code, data)
				uni.requestPayment({
					provider:'alipay',
					orderInfo:data,
					success: (res) => {
						console.log(res)
					}
				})

			},
			// 创建订单
			//  payOrders(money:any,id:any){
			//   var params={
			//     orderMoney:money,
			//     orderTargetId:id
			//   }
			//    payOders(params).then(res=>{
			//      if(res.code=='A000'){
			//        this.pay(res.data)
			//
			//      }else {
			//        uni.$u.toast(res.data)
			//      }
			//    })
			//  },
			pay(pid) {
				WeChatPay(pid).then(res => {
					pay(res, (res) => {
						this.isFalse = true
						//这里是支付成功的回调
						// uni.navigateBack()
					}, (res2) => {
					})
				}).catch(Error => {
					console.log('支付失败：', Error)
				})
			},
			// 详细地址
			getAddress() {
				var that = this
				chooseLocationMP((res) => {
					// console.log('地址', res)
					that.addressb = res.address;
				})
			},
			numberInputResult(e : string) {
				e = e.trim()
				// console.log('结果--', e, e.length)
				if (e.length > 7) {
					this.newEnergy = true
				}
				this.licensePlateNumbers = e.trim().split('')
				this.licensePlateNumber = e.substring(0, 2) + "-" + e.substring(2)
				// console.log('表单', this.licensePlateNumbers)
			},

			async toIndex() {
				//订阅消息
				const data = await getEtcApplyStmpIdList();
				uni.requestSubscribeMessage({
					tmplIds: data,
					success(res) {
						console.log('订阅消息-成功', res)
						uni.switchTab({
							url: '/pages/index/index'
						})
					},
					fail(res) {
						console.log('订阅消息-失败', res)
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				})
				this.isFalse = false
			},
			closeisFalse() {
				this.isFalse = false
			}

		}

	})
</script>

<style scoped>
	.bg {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	.top-box {
		width: 100%;
		height: 210rpx;
		background-color: #0C77FB;
	}

	/*  */
	.box {
		margin: 0 27rpx;
		/* margin-top: -170rpx; */
		padding: 37rpx 24rpx;
		border-radius: 15rpx;
		background-color: #ffffff;
	}

	.box-top {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.box-m {
		margin: -170rpx 0 20rpx 27rpx;
	}

	.serviceBox {
		margin: 27rpx 0 20rpx 27rpx;
	}

	.m_1 {
		width: 696rpx;
		height: 520rpx;
		border-radius: 15rpx;
	}

	.lines {
		width: 8rpx;
		height: 26rpx;
		background: #0C77FB;
		margin-right: 12rpx;
	}

	.blocks-box {
		display: flex;
		align-items: center;
	}

	.blocks {
		width: 10rpx;
		height: 10rpx;
		background: #0C77FB;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	/*  */
	.boxs {
		margin-top: 30rpx;
	}

	.box-cells {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		padding-bottom: 35rpx;
		padding-left: 20rpx;
		border-bottom: 2rpx solid #EFEFEF;
	}

	.box-cells-input {
		color: #000000;
		width: 70%;
	}

	.b-color {
		color: #A6A6A6;
	}

	.box-cells-inputs {}

	.tips-box {
		font-size: 24rpx;
		margin-top: 30rpx;
	}

	.box-top image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	/*  */
	.btn {
		margin: 80rpx 27rpx 20rpx;
		padding: 33rpx 281rpx;
		color: #ffffff;
		background-color: #1A6FFD;
		border-radius: 50rpx;
	}

	/*  */
	.fetchs {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background: #000000;
		opacity: 0.5;
	}

	.fetchs-box {
		position: relative;
		top: -900rpx;
		left: 60rpx;
		z-index: 100;
		width: 630rpx;
		height: 408rpx;
		background: #FFFFFF;
		border-radius: 15rpx;
	}

	.boxx {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fetchs-box-top image {
		margin-top: 68rpx;
		width: 88rpx;
		height: 88rpx;
		margin-bottom: 25rpx;
	}

	.sure-btn {
		margin-top: 52rpx;
		width: 550rpx;
		height: 100rpx;
		background: #1A6FFD;
		border-radius: 15rpx;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
	}
</style>